
  <template>
    <el-container class="order-list-page">
      <el-header>
        <h2>订单管理</h2>
      </el-header>
      <el-main>
        <el-table :data="orders" style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="150" />
          <el-table-column prop="customer_name" label="顾客姓名" />
          <el-table-column prop="total_amount" label="总金额" />
          <el-table-column prop="created_at" label="创建时间" />
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button type="primary" @click="viewOrderDetails(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 订单详情的 Dialog -->
        <el-dialog title="订单详情" v-model="dialogVisible">
          <el-table :data="selectedOrder.items" style="width: 100%">
            <el-table-column prop="title" label="书名" />
            <el-table-column prop="discount" label="折扣" />
            <el-table-column prop="price" label="价格" />
            <el-table-column prop="quantity" label="数量" />
            <el-table-column prop="total" label="小计" />
          </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
          </span>
        </el-dialog>
      </el-main>
    </el-container>
  </template>
  
  <script>
  import { ref, onMounted,nextTick } from 'vue';
  import OrderService from '@/api/orderService';
  
  export default {
    name: 'OrderListPage',
    setup() {
      const orders = ref([]);
      const dialogVisible = ref(false);
      const selectedOrder = ref({ items: [] });
  
      async function fetchOrders() {
        try {
          const response = await OrderService.getOrders();
          orders.value = response.data;
        } catch (error) {
          console.error('Error fetching orders:', error);
        }
      }
  
      function viewOrderDetails(order) {
        selectedOrder.value = order;
        nextTick(() => {
            dialogVisible.value = true;
        });
    }
  
      onMounted(() => {
        fetchOrders();
      });
  
      return {
        orders,
        dialogVisible,
        selectedOrder,
        viewOrderDetails
      };
    }
  };
  </script>
  
  <style scoped>
  .order-list-page {
    padding: 20px;
  }
  
  .el-header {
    background-color: #409EFF;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 24px;
  }
  </style>
  